<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { get_Elewater } from '@/request';
var option = {
    grid: {
        top: "25%",
        bottom: "10%"//也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "cross",
            label: {
                show: false
            }
        }
    },
    legend: {
        data: ["安防设备用电", "教学用水", "生态用水", "生活用水"],
        top: "5%",
        itemWidth: 14,
        itemHeight: 14,
        textStyle: {
            inside: true,
            color: '#fff',
            padding: [11, 0, 10, 0],
            align: 'left',
            verticalAlign: 'center',
            fontSize: 14,
            rich: {},
        },
        icon:'circle'
    },
    xAxis: {
        data: [
            "2024-06-01",
            "2024-06-02",
            "2024-06-03",
            "2024-06-04",
            "2024-06-05",
            "2024-06-06",
        ],
        axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: true //隐藏X轴刻度
        },

        axisPointer: {
            "type": "shadow"
        },

        axisLabel: {
            show: true,
            textStyle: {
                color: "#fff" //X轴文字颜色
            }
        },

    },
    yAxis: [{
        type: "value",
        axisLine: {
            show: false,
            lineStyle: {
                color: '#FFFFFF'
            }
        },
    },
    ],
    series: [{
        name: "安防设备用电",
        type: "bar",
        barWidth: 10,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        color: '#5470C6',
        itemStyle: {
            normal: {
                barBorderRadius: [5, 5, 5, 5],
            },
        },
        data: [10, 12, 15, 14, 16, 13, 15]
    },
    {
        name: "教学用水",
        type: "bar",
        barWidth: 10,
        color: "#91CC75",
        itemStyle: {
            normal: {
                barBorderRadius: [5, 5, 5, 5],
            },
        },
        data: [30, 31, 35, 32, 33, 31, 30]
    },
    {
        name: "生态用水",
        type: "bar",
        barWidth: 10,
        color: "#FAC858",
        itemStyle: {
            normal: {
                barBorderRadius: [5, 5, 5, 5],
            },
        },
        data: [120, 122, 135, 137, 132, 100, 110]
    },
    {
        name: "生活用水",
        type: "bar",
        barWidth: 10,
        color: "#EE6666",
        itemStyle: {
            normal: {
                barBorderRadius: [5, 5, 5, 5],
            },
        },
        data: [45, 48, 35, 50, 45, 38, 43]
    }
    ]
};
onMounted(() => {
    var chartDom = document.getElementById('water');
    var myChart = echarts.init(chartDom);
    get_Elewater().then(resp => {
        console.log('水电用量', resp)
        option.legend.data = resp.data.data.result[0].series.map(item => item.name)
        option.xAxis.data = resp.data.data.result[0].yAxis.data
        option.series = resp.data.data.result[0].series.map(item => {
            return {
                ...item,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: [5, 5, 5, 5],
                    },
                },
            }
        })
        option && myChart.setOption(option);
    })

    window.addEventListener('resize', function () {
        myChart.resize();
    });
})
</script>

<template>
    <div id="water">

    </div>
</template>

<style scoped lang="scss">
#water {
    width: 100%;
    height: 100%;
}
</style>
